<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    #container{

    }

    #form{
      height: 50px;
      line-height: 50px;
      text-align: left;
    }

    #main-containner{
      padding: 0;
      margin: 0;
    }

    #button{
      margin-right: 20px;
      margin-bottom: 10px;
      text-align: right;
    }
  </style>
</head>
<body>
<div id="app">
  <!--添加数据的对话框表单-->
  <el-dialog
          title="添加"
          :visible.sync="dialogVisible"
          width="30%">
    <!--添加数据的项目-->
    <el-form ref="form" :model="brand" label-width="80px">
      <el-form-item label="品牌名称">
        <el-input v-model="brand.brandName"></el-input>
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="brand.companyName"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="brand.ordered"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="brand.description"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBrand">提交</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--修改数据表单-->
  <el-dialog

          title="修改品牌"
          :visible.sync="updateDialogVisible"
          width="30%"
  >

    <el-form ref="form" :model="brandSelect" label-width="80px">
      <el-form-item label="品牌名称">
        <el-input  v-model="brandSelect.brandName"></el-input>
      </el-form-item>

      <el-form-item label="企业名称">
        <el-input v-model="brandSelect.companyName"></el-input>
      </el-form-item>

      <el-form-item label="排序">
        <el-input v-model="brandSelect.ordered"></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="brandSelect.description"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-switch v-model="brandSelect.status"
                   active-value="1"
                   inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="update">提交</el-button>
        <el-button @click="updateDialogVisible = false">取消 </el-button>
      </el-form-item>
    </el-form>

  </el-dialog>





  <div id="container">
    <template>
      <div class="common-layout">
        <el-container>
          <el-header>
            Header
          </el-header>

          <el-container style="min-height: 98vh">
            <el-aside width="200px">
              Aside
            </el-aside>

            <el-container>
              <el-main id="main-containner">


                <!--搜索表单-->
                <el-form :inline="true" :model="brand" class="demo-form-inline" id="form">

                  <el-form-item label="当前状态" >
                  <el-select v-model="brand.status" placeholder="当前状态" style="line-height: 50px">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                  </el-form-item>

                  <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称" style="line-height: 50px"></el-input>
                  </el-form-item>

                  <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称" style="line-height: 50px"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="onSubmit" >查询</el-button>
                  </el-form-item>

                  <!--新增和批量删除-->
                  <span id="button">
                    <el-button type="primary" @click="dialogVisible=true" plain>新增</el-button>
                    <el-button type="warning" @click="deleteByIds" plain>批量删除</el-button>
                    <el-button type="info" @click="reset" plain>重置</el-button>
                  </span>


                </el-form>


                <!--数据-->
                <template>
                  <el-table
                          :data="tableData"
                          border
                          style="width: 100%"
                          :row-class-name="tableRowClassName"
                          @selection-change="handleSelectionChange"
                  >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <<el-table-column
                          type="index"
                          align="center"
                          width="50">
                  </el-table-column>
                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="描述"
                            align="center"
                            width="350">
                    </el-table-column>
                    <el-table-column
                            prop="statusStr"
                            label="当前状态"
                            align="center"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            align="center"
                            width="250">

                      <template slot-scope="scope">
                        <el-row>
                          <el-button type="primary" @click="updateBrand(scope.row) ">修改</el-button>
                          <el-button type="danger" @click="deleteBrand(scope.row.id)">删除</el-button>
                        </el-row>
                      </template>
                      <!--<template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>-->
                    </el-table-column>
                  </el-table>
                </template>

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[8, 16, 24, 32]"
                        :page-size="8"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>

              </el-main>
              <el-footer>Footer</el-footer>
            </el-container>
          </el-container>
        </el-container>
      </div>
    </template>
  </div>





</div>





<script src="js/axios-0.18.0.js"></script>
<script src="./js/vue.js"></script>
<script src="./element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
  new Vue({
    el:"#app",
    methods: {
      tableRowClassName({row,rowIndex}){
        if(rowIndex===1){
          return'warning-row';
        }else if(rowIndex===3){
          return 'success-row';
        }
        return '';
      },
      //复选框选中后执行的方法
      handleSelectionChange(val){
        //存储选中的对象
        this.multipleSelection=val;
      },
      onSubmit() {
        //查询方法
        this.selectByCondition();
      },


      //设置每页条数
      handleSizeChange(val) {
        this.pageSize=val;
        this.selectByCondition();
      },

      //点击页码跳转
      handleCurrentChange(val) {
        this.currentPage=val;
        this.selectByCondition();
      },


      //添加数据
      addBrand(){
        var _this=this

        this.$confirm('您确定要添加该条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method:"post",
            url:"http://localhost:8080/project123/brand/add",
            data:_this.brand
          }).then (resp=>{
            {
              /*该this指的是window对象*/
              if(resp.data=='success'){
                //添加成功
                _this.openAddTrue()
                //关闭窗口
                _this.dialogVisible=false;

                //重新查询数据
                _this.selectAll();
              }
              else {
                //添加失败
                _this.openAddFalse();
                //关闭窗口
                _this.dialogVisible=false;
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
          _this.dialogVisible=false;
        });
       /* var _this=this

        this.$confirm('您确定要添加该条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method:"post",
            url:"http://localhost:8080/project123/brand/add",
            data:_this.brand
          }).then(function (resp){
            /!*该this指的是window对象*!/
            if(resp.data=='success'){
              //添加成功
              _this.openAddTrue()
              //关闭窗口
              _this.dialogVisible=false;

              //重新查询数据
              _this.selectAll();
            }
            else {
              //添加失败
              _this.openAddFalse();
              //关闭窗口
              _this.dialogVisible=false;
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
          _this.dialogVisible=false;
        });*/

      },
      //分页条件查询
      selectByCondition(){
        /*//页面加载完成后执行后，发送异步请求，获取数据
        /!*该this为Vue对象*!/
        var _this=this
        axios({
          method:"get",
          url:"http://localhost:8080/project123/brand/selectAll"
        }).then(function (resp){
          /!*该this指的是window对象*!/
          _this.tableData=resp.data;
        })*/
        //页面加载完成后执行后，发送异步请求，获取数据
        /*该this为Vue对象*/
        var _this=this
        axios({
          method:"post",
          url:"http://localhost:8080/project123/brand/selectByPageAndCondition?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize,
          data:_this.brand
        }).then(function (resp){
          /*该this指的是window对象*/
          _this.tableData=resp.data.rows; //{rows:[],totalCount:100},
          _this.totalCount=resp.data.totalCount;
        })
      },

      //查询分页数据
      selectAll(){
        /*//页面加载完成后执行后，发送异步请求，获取数据
        /!*该this为Vue对象*!/
        var _this=this
        axios({
          method:"get",
          url:"http://localhost:8080/project123/brand/selectAll"
        }).then(function (resp){
          /!*该this指的是window对象*!/
          _this.tableData=resp.data;
        })*/
        //页面加载完成后执行后，发送异步请求，获取数据
        /*该this为Vue对象*/
        var _this=this
        axios({
          method:"post",
          url:"http://localhost:8080/project123/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
        }).then(function (resp){
          /*该this指的是window对象*/
          _this.tableData=resp.data.rows; //{rows:[],totalCount:100},
          _this.totalCount=resp.data.totalCount;
        })
      },

      //删除选中行
      deleteBrand(id){
/*        this.openDelete();*/
        this.selectId=id;
        var _this=this;

        this.$confirm('您确定要删除该条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method:"post",
            url:"http://localhost:8080/project123/brand/deleteById",
            data:_this.selectId
          }).then(function (resp) {
            /*该this指的是window对象*/
            if (resp.data) {
              //删除成功
              _this.openDeleteTrue()

              //重新查询数据
              _this.selectAll();
            } else {
              //删除失败
              _this.openDeleteFalse();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改数据
      update(){
/*        this.openUpdate();*/
        var _this = this;
        this.$confirm('您确定要修改该条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            method:"post",
            url:"http://localhost:8080/project123/brand/update",
            data:_this.brandSelect //这是提交的表单数据
          }).then(function (resp){
            //这里是success数据
            if(resp.data == "success"){
              _this.updateDialogVisible = false;
              //重新查询数据进行显示
              _this.selectAll();
              _this.$message({
                message: '恭喜你，修改成功',
                type: 'success'
              });
            }
            if(resp.data == "fail"){
              _this.$message.error('修改失败');
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
          this.updateDialogVisible = false;
        });
      },
      //更新选中行
      updateBrand(row) {
        // 这里JSON.stringify表示将row(script对象)转为json,
        // 这里JSON.parse表示将json对象转为script对象
        // 目的是为了不让updateData地址指向row，此时的row是我们展示在表格上的数据的模型brandData
        // 如果直接写row，那我们在填写对话框时，此时修改数据，表格上的数据也会跟着改变
        // 原因就是我们直接用=会将地址赋值，指向了表格上的的数据模型的地址。
        this.brandSelect = JSON.parse(JSON.stringify(row));
        this.updateDialogVisible = true;
      },

      //完成批量删除
      deleteByIds(){
        //1.创建id数组
        for(let i=0;i<this.multipleSelection.length;i++) {
          let selectionElement = this.multipleSelection[i];
          this.selectIds[i] = selectionElement.id;
        }
        var _this=this;
        this.$confirm('您确定要删除这些数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          axios({
            method:"post",
            url:"http://localhost:8080/project123/brand/deleteByIds",
            data:_this.selectIds
          }).then(function (resp) {
            //重新查询数据进行显示
            _this.selectAll();
            _this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      reset(){
        this.selectAll();
      },
      openAddTrue() {
        this.$message({
          message: '恭喜你，添加成功',
          type: 'success'
        });
      },
      openAddFalse() {
          this.$message.error('对不起，添加失败');
        },
      openDeleteTrue() {
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        });
      },
      openDeleteFalse() {
        this.$message.error('对不起，删除失败');
      },
    },

    data() {
      return {

        //选中行的id数组
        selectIds:[],
        //选中行对象
        brandSelect: {},
        //更新表单显示
        updateDialogVisible:false,
        //选中行id
        selectId:'',
        //页码
        currentPage: 1,
        //每页条数
        pageSize:8,
        //总数据数
        totalCount:10,
        //对话框是否显示的值
        dialogVisible: false,

        //品牌模型数据
        brand: {
          id:"",
          brandName: '',
          companyName: '',
          ordered:"",
          description:"",
          status:""
        },
        //表格数据
        tableData: [],
        //复选框选中数据集合
        multipleSelection:[]
      }
    },
    mounted(){
      this.selectAll();

    }

  })
</script>
</body>
</html>